<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div id="title">
        <button data-path="/home">首页</button>
        <button data-path="/center">我的</button>
        <button data-path="/hot">热门</button>
      </div>
      <div id="view"></div>
    </div>

    <script>
      class Stop {
        constructor(name) {
          this.list = []; //任务列表 用于储存任务队列
          this.name = name;
          console.log(this.name);
          setTimeout(() => {
            this.next();
          }, 0);

          return this;
        }
      }

      Stop.prototype.play = function (what) {
        const fn = () => {
          console.log(`我在玩${what}`);
          this.next();
        };
        //加入异步队列
        this.list.push(fn);

        return this;
      };

      Stop.prototype.sleep = function (timer) {
        const fn = () => {
          setTimeout(() => {
            this.next();
          }, timer);
        };
        this.list.push(fn);
        return this;
      };

      //每次拿出一个队列中的任务用于执行
      Stop.prototype.next = function () {
        const fn = this.list.shift();

        fn && fn();
      };

      let boy = new Stop("汤姆");
      boy.play("鸡巴").sleep(2000).play("牛子").sleep(3000).play("打飞机");
    </script>
  </body>
</html>
